<script>
export default {
  name: "TodoItem",
  methods:{

  },
  props: ['todoObj', 'changeChecked', 'deleteItem']
}
</script>

<template>
    <li>
      <label>
        <input type="checkbox" :checked="todoObj.done" @change="changeChecked(todoObj.id)">
        <span>{{todoObj.title}}</span>
        <button @click="deleteItem(todoObj.id)">删除</button>
      </label>
    </li>
</template>

<style scoped lang="less">
li label button {
  display: none;
}

li:hover {
  background-color: azure;
}

li:hover button {
  display: block;
}
</style>
